<template>
    <el-dialog v-model="dialogVisible" title="批量新增" width="640" @close="CancelBatchCreate">
        <el-form ref="formRef" :model="params" :rules="rules" label-width="120">
            <el-form-item label="Api列表数据" prop="BatchJson">
                <el-input type="textarea" v-model="params.BatchJson" placeholder="请输入JSON格式数据"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="modal-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="BatchSubmit">提交</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from 'vue';
import * as types from "./types"
import { FormInstance, FormRules } from 'element-plus';
import { ApiApi } from '@/api/permession/api';
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{ visible: boolean }>()

const emit = defineEmits<{
    (e: "update:visible", visible: boolean): void
    (e: 'submitSuccess'): void
}>()

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit("update:visible", val)
})

const initForm: types.BatchDialogForm = {
    BatchJson: ''
}
const params = ref<types.BatchDialogForm>({ ...initForm })

const formRef = ref<FormInstance>()
const rules: FormRules<types.BatchDialogForm> = {
    BatchJson: { required: true, message: '批量API接口数据不能为空', trigger: 'blur' }
}

const CancelBatchCreate = () => {
    nextTick(() => {
        params.value = { ...initForm }
        formRef.value?.resetFields();
    })
}

const BatchSubmit = async () => {
    if (!formRef.value) { return }

    const valid = await formRef.value.validate(() => { })
    if (!valid) { return }

    params.value.BatchJson = JSON.parse(params.value.BatchJson)
    ApiApi.BatchInsertApi({ ...params.value }).then(() => {
        CancelBatchCreate()
        MessageUti.showSuccess('批量新增成功')
    })
}

</script>

<style scoped></style>